import "./index.scss"
import {View} from "@tarojs/components"
import {observer} from "mobx-react"
import {useContext} from "react"
import Taro, {useDidHide, useDidShow, useRouter} from "@tarojs/taro"
import {singleDevBeSharedListStore} from "./model"
import {ShareDevCard} from "./components"

const Singledevbesharedlist = () => {
	let router = useRouter()
	const {
		updatePageQuery,
		pageQuery,
		dataList,
		detailData,
		updateDevList,
		current,
		changeCurrent
	} = useContext(singleDevBeSharedListStore)

	// 对应 onShow
	useDidShow(() => {
		console.log("Singledevbesharedlist useDidShow")
		updatePageQuery(router.params)
		updateDevList()
	})
	// 对应 onHide
	useDidHide(() => {
		console.log("Singledevbesharedlist useDidHide")
		changeCurrent(1)
	})
	return (
		<View className="w-screen h-screen pb-30 flex flex-col overflow-hidden">
			<View className="w-full flex items-center px-16 mt-24 mb-12">
				<View className="hanzi text-16 mr-4">分享</View>
				<View className="hanzi text-16 font-medium">{pageQuery.devName}</View>
			</View>
			<View className="w-full h-20 px-16 mb-24 flex justify-between items-center">
				<View className="hanzi text-14 text-xx_text truncate">{`分享设备${
					detailData.shareCount || 0
				}次`}</View>
				<View className="h-full pt-4 pb-2">
					<View className="w-1 h-full bg-xx_text"></View>
				</View>
				<View className="hanzi text-14 text-xx_text truncate">{`被分享设备${
					detailData.passiveShareCount || 0
				}台`}</View>
				<View className="h-full pt-4 pb-2">
					<View className="w-1 h-full bg-xx_text"></View>
				</View>
				<View className="hanzi text-14 text-xx_text truncate">{`分享相关设备${
					detailData.shareLinkDevCount || 0
				}台`}</View>
			</View>
			<View className="w-full h-38 mb-12 flex">
				<View
					className={`tabbar hanzi w-125 h-full pt-6 text-center text-16 text-xxx_text ${
						current === 1 ? "active" : ""
					}`}
					onClick={() => changeCurrent(1)}
				>
					当前设备
				</View>
				<View
					className={`tabbar hanzi w-125 h-full pt-6 text-center text-16 text-xxx_text ${
						current === 2 ? "active" : ""
					}`}
					onClick={() => changeCurrent(2)}
				>
					相关设备
				</View>
			</View>
			<View className="flex-1 p-12 mb-16 overflow-y-auto">
				{dataList.map(item => (
					<ShareDevCard
						devName={item.devName}
						devTarget={item.shareStatus}
						belongUser={item.shareData}
						user={String(item.shareUserName)}
						time={item.shareCreateTime || "暂无分享时间"}
					></ShareDevCard>
				))}
			</View>
			<View className="w-full px-16">
				<View className="h-48 leading-48 mb-10 bg-white rounded-6 text-16 text-xxx_text text-center font-medium border-1 border-solid border-xxx_text">
					分享当前设备
				</View>
			</View>
		</View>
	)
}
{
	/*
  <View className="w-full px-16">
    <View className="h-48 leading-48 mb-10 bg-white rounded-6 text-16 text-xxx_text text-center font-medium border-1 border-solid border-xxx_text">
      分享当前设备
    </View>
  </View>
  */
}
export default observer(Singledevbesharedlist)
